<template>
  <div class="main-box">
    <el-container>
      <el-aside>
        <main-aside :isCollapse="isCollapse" />
      </el-aside>
      <el-container>
        <el-header>
          <main-header :isCollapse="isCollapse" @handle="handleChange" />
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRefs, reactive } from 'vue'
  import mainAside from './mainMenu.vue'
  import mainHeader from './mainHeader.vue'
  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Main',
    components: {
      mainAside,
      mainHeader
    },
    setup: () => {
      let collapse = reactive({
        isCollapse: false
      })
      const handleChange = (flag: boolean) => {
        collapse.isCollapse = flag
      }
      return { ...toRefs(collapse), handleChange }
    }
  })
</script>

<style lang="scss" scoped>
  .main-box {
    height: 100%;
    width: 100%;
    position: fixed;
    .el-container {
      height: 100%;
    }
    .el-header {
      background-color: #2d3a4b;
      color: #fff;
      line-height: 60px;
    }

    .el-aside {
      background-color: #2d3a4b;
      color: #333;
      width: auto !important;
      overflow: hidden;
    }

    .el-main {
      background-color: #fff;
      color: #333;
    }
  }
</style>
